<template>
  <div class="home">
    <div style="position: fixed;top: 0;left: 0;z-index: 100;width: 100%;">
      <titleCustom :title="$route.meta.title" :backUrl="''"></titleCustom>
    </div>
    <div class="infoTop">
      <div class="topLeft">
        <div class="leftAvart">
          <van-icon name="contact" />
        </div>
        <div class="leftName">
          <div style="font-size: 16px;">{{seatInfo.name||""}}</div>
          <div>{{seatInfo.cno||""}}</div>
          <div v-if="seatInfo.status === 1">
            <div class="status-point" style=" background-color:#67C23A;" />
            <span style="font-size:11px;color:#67C23A;">在线</span>
          </div>
          <div v-else-if="seatInfo.status === 0">
            <div class="status-point" style="background-color:#A0A0A0;font-size:16" />
            <span style="font-size:11px;color:#A0A0A0;">离线</span>
          </div>
        </div>
      </div>
      <div style="color: #3f76c6;" @click="lookPhone">查看外显号码</div>
    </div>
    <div class="formDataClass">
      <div class="dataItem">
        <div style="width: 120px;">绑定类型</div>
        <div style="color: #98898d;" v-if="seatInfo.telType==0">未绑定</div>
        <div style="color: #98898d;" v-if="seatInfo.telType==1">固话</div>
        <div style="color: #98898d;" v-if="seatInfo.telType==2">手机</div>
        <div style="color: #98898d;" v-if="seatInfo.telType==3">IP话机</div>
        <div style="color: #98898d;" v-if="seatInfo.telType==4">软电话</div>
      </div>
      <div class="dataItem">
        <div style="width: 120px;">座席绑定号码</div>
        <div @click="showTels" style="color: #98898d;">
          <span style="color: #98898d;">{{seatInfo.bindTel||"未绑定"}}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="dataItem">
        <div style="width: 120px;">是否激活</div>
        <div style="color: #98898d;" v-if="seatInfo.active==1">是</div>
        <div style="color: #98898d;" v-if="seatInfo.active==0">否</div>
      </div>
      <div class="dataItem">
        <div style="width: 120px;">座席状态</div>
        <div style="color: #98898d;" v-if="seatInfo.status==1">在线</div>
        <div style="color: #98898d;" v-if="seatInfo.status==0">离线</div>
      </div>
    </div>
    <div class="formDataClass">
      <div class="dataItem">
        <div style="width: 120px;">语音转写</div>
        <div style="color: #98898d;" v-if="seatInfo.permissionAsr==0">关闭</div>
        <div style="color: #98898d;" v-if="seatInfo.permissionAsr==1">呼入开启</div>
        <div style="color: #98898d;" v-if="seatInfo.permissionAsr==2">外呼开启</div>
        <div style="color: #98898d;" v-if="seatInfo.permissionAsr==3">呼入开启；外呼开启</div>
      </div>
    </div>
    <div :class="seatInfo.bindTel==null||seatInfo.bindTel==''?'buttomClass':'buttomClassRed'" @click="navPhone">
      {{seatInfo.bindTel==null||seatInfo.bindTel==''?'绑定号码':'更换绑定号码'}}
    </div>
    <van-popup v-model="show" closeable>
      <div class="popupClass" v-if="telList!=null&&telList.length>0">
        <div class="popupTitle">座席绑定号码</div>
        <div class="phoneItem" v-for="(item,index) in telList" :key="index">
          <div class="phoneNumberClass">
            {{ item.tel }}
            <span style="color: #feca59;" v-if="item.telType==1">固话</span>
            <span style="color: #feca59;" v-if="item.telType==2">手机</span>
            <span style="color: #feca59;" v-if="item.telType==3">IP话机</span>
            <span style="color: #feca59;" v-if="item.telType==4">软电话</span>
          </div>
          <div style="line-height: 20px;display: flex;flex-direction: row;align-items: center;">
            <div :style="item.isBind==1?'color:#f87775;':'color: #66a3fe;'" @click="update(item)">
              {{item.isBind==1?'解绑':'绑定'}}
            </div>
            <div style="color: #66a3fe;margin-left: 10px;" @click="deletePhone(item)">删除</div>
          </div>
        </div>
      </div>
      <div class="popupClass" v-if="telList==null||telList.length==0">
        <div class="popupTitle">当前座席未绑定号码</div>
      </div>

    </van-popup>
    <van-dialog v-model="showPhone" confirm-button-text="知道了" confirm-button-color="#27a4e9">
      <div style="display: flex;align-items: center;line-height: 35px;justify-content: center;font-size: 18px;">外显号码信息</div>
      <div style="margin-left: 10px;line-height: 25px">当前外显号码</div>
      <div class="dialogClass" >
        <div v-if="obclidList.length>0" style="font-weight: 600;margin-top: 10rpx;" v-for="(item,index) in obclidList" :key="index">
          {{ item }}
        </div>
        <div v-if="obclidList==null||obclidList.length==0">暂无</div>
      </div>
      <div style="margin-left: 10px;line-height: 25px">可选外显号码</div>
      <div class="dialogClass" style="max-height: 250px;margin-left: unset" v-if="externalTelList.length>0">
        <div v-for="(item,index) in externalTelList" :key="index">
          <van-row style="background-color: #f9fafc;margin: 0 10px 15px;padding: 2px 5px;display: flex;align-items: center">
            <van-col span="18">
              <div style="padding: 5px 0;font-size: 15px;font-weight: bold;line-height: 100%;margin-bottom: 2px ">{{ item.exTel }}({{item.belong}})</div>
              <div style="padding: 5px 0;line-height: 100%;margin-bottom: 2px">{{item.lineName}}</div>
              <div style="background: #faebd79e;padding: 5px 0;line-height: 100%;font-size: 12px;display: flex;flex-direction: row;align-items: center;justify-content: space-between">
                <van-col span="13">
                  <div>外呼数：{{ item.outBoundCount ? item.outBoundCount : 0}}</div>
                </van-col>
                <van-col span="11">
                  <div>接听率：<span :style="{color: parseFloat(item.outBoundRate)>=0.55?'green':'red'}">{{ item.outBoundRate ? (parseFloat(item.outBoundRate) * 100).toFixed(2) + '%' : '0'}}</span></div>
                </van-col>
              </div>
            </van-col>
            <van-col span="6" style="text-align: center;">
              <div :style="obclidList.includes(item.exTel)?'color:#f87775;':'color: #66a3fe;'" @click="updateSeat(item, obclidList.includes(item.exTel))">
                {{obclidList.includes(item.exTel)?'当前绑定':'绑定'}}
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  Toast,
  Dialog,
  Notify
} from 'vant'
import titleCustom from '@/components/titleCustom/title'
import aiccSeatApi from '@/apiaicc/aiccSeatApi'
import AiccApi from '../../../api/aiccApi'
export default {
  components: {
    titleCustom,
    Toast,
    Dialog,
    Notify
  },
  data() {
    return {
      show: false,
      showPhone: false,
      //座席详情
      seatInfo: [],
      //外线号码
      obclidList: [],
      //绑定手机列表
      telList: [],
      externalTelList: []
    }
  },
  mounted() {
    this.getSeatInfo()
    this.getExternalTel()
  },
  methods: {
    getSeatInfo() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true
      })
      aiccSeatApi.getSeatDetail({}).then((res) => {
        Toast.clear()
        console.log('getSeatInfo', res)
        if (res.code == 0) {
          this.seatInfo = res.data
          this.obclidList = res.data.obclids
          if(this.obclidList==null){
            this.obclidList=[]
          }
        } else {
          Dialog.alert({
            title: '',
            message: res.msg
          }).then(() => {
            // on close
          })
        }
      })
    },
    // 获取外显号码
    getExternalTel() {
      AiccApi.getExternalTel({}).then((res) => {
        if (res.data && res.data.length !== 0) {
          this.externalTelList = res.data
        }
      })
    },
    lookPhone() {
      this.showPhone = true
    },
    //座席电话列表
    showTels() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true
      })
      aiccSeatApi.getSeatTels({}).then((res) => {
        console.log('getSeatInfo', res)
        Toast.clear()
        if (res.code == 0) {
          this.telList = res.data
          if(this.telList!=null&&this.telList.length>0){
            this.show = true
          }else{
            Dialog.alert({
              title: '',
              message: '当前坐席未绑定号码'
            }).then(() => {
              // on close
            })
          }
        } else {
          Dialog.alert({
            title: '',
            message: res.msg
          }).then(() => {
            // on close
          })
        }
      })
    },

    /**
     * 跳转绑定号码
     */
    navPhone() {
      this.$router.push("/seatPhone");
    },
    /**
     * 解绑/绑定
     * @param {} item
     */
    update(item) {
      if (item.isBind == 1) {
        //解绑
        this.unBindTel(item)
      } else {
        //绑定
        this.bindTel(item)
      }
    },
    //解绑
    unBindTel() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true
      })
      aiccSeatApi.unBindClientTel({}).then((res) => {
        Toast.clear()
        if (res.code == 0) {
          this.getSeatInfo()
          Notify({
            type: 'success',
            message: '解绑成功'
          })
          this.show = false
        } else {
          Dialog.alert({
            title: '',
            message: res.msg
          }).then(() => {
            // on close
          })
        }
      })
    },
    //绑定
    bindTel(item) {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true
      })
      console.log('bindTel', item);
      let bindType = (item.telType == 1 || item.telType == 2) ? 1 : 2
      aiccSeatApi.bindClientTel({
        "bindTel": item.tel,
        "code": "",
        "needCode": 0,
        "bindType": bindType
      }).then((res) => {
        Toast.clear()
        if (res.code == 0) {
          this.getSeatInfo()
          Notify({
            type: 'success',
            message: '绑定成功'
          })
          this.show = false
        } else {
          Dialog.alert({
            title: '',
            message: res.msg
          }).then(() => {
            // on close
          })
        }
      })
    },
    /**
     * 删除
     */
    deletePhone(item) {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true
      })
      aiccSeatApi.delClientTel({
        "delTel": item.tel
      }).then((res) => {
        Toast.clear()
        if (res.code == 0) {
          Notify({
            type: 'success',
            message: '删除成功'
          })
          this.show = false
        } else {
          Dialog.alert({
            title: '',
            message: res.msg
          }).then(() => {
            // on close
          })
        }
      })
    },
    updateSeat(item, isBind) {
      if (!isBind) {
        let param = {
          tels: item.exTel
        }
        aiccSeatApi.updateSeat(param).then(res => {
          if (res.code == 0) {
            Notify({ type: 'success', message: '外显号码切换成功' })
            this.getSeatInfo()
            this.getExternalTel()
          } else if (res.code == -899) {
            Notify({ type: 'danger', message: '外显号码有误' })
          } else {
            Notify({ type: 'danger', message: '绑定失败' })
          }
        })
      }
    }
  }
};
</script>
<style scoped>
.home {
  background-color: #f2f2f2;
  height: calc(100vh - 60px);
  width: 100%;
  font-size: 14px;
  padding-top: 60px;
}

.infoTop {
  width: 100vw;
  height: 90px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 15px 15px;
  font-size: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.topLeft {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}

.leftAvart {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #4385ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 35px;
}

.leftName {
  margin-left: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.status-point {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.formDataClass {
  width: 100vw;
  background-color: #fff;
  height: auto;
  margin-top: 20px;
}

.dataItem {
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #eee;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}

.popupClass {
  width: 85vw;
  height: auto;
  position: relative;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
}

.popupTitle {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phoneItem {
  width: 90%;
  background-color: #f9fafc;
  height: 60px;
  margin-left: 5%;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.phoneNumberClass {
  font-size: 15px;
  font-weight: 600;

}

.dialogClass {
  width: 100%;
  line-height: 25px;
  min-height: 35px;
  max-height: 180px;
  margin-left: 10px;
  overflow: auto;
}

.buttomClass {
  width: 80vw;
  height: 45px;
  border-radius: 5px;
  margin-top: 40px;
  position: relative;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: #2782d7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;

}

.buttomClassRed {
  width: 80vw;
  height: 45px;
  border-radius: 5px;
  margin-top: 40px;
  position: relative;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: #B84E43;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;

}
</style>
